<script setup>
import { ref, onMounted } from 'vue';

const isVisible = ref(false);
const footerRef = ref(null);

onMounted(() => {
  // 不再动态加载FontAwesome，改为在index.html中加载或通过npm包管理

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        isVisible.value = true;
        observer.disconnect();
      }
    });
  }, { threshold: 0.2 });
  
  if (footerRef.value) {
    observer.observe(footerRef.value);
  }
});
</script>

<template>
  <footer ref="footerRef" class="footer-section" :class="{ 'animate': isVisible }">
    <div class="footer-container">
      <div class="footer-top">
        <!-- 公司信息区域 -->
        <div class="company-info">
          <div class="logo">
            <img src="@/assets/icons/logo.png" alt="TripGo Logo" />
          </div>
          <p class="company-desc">
            探索中国之美，感受东方魅力。我们致力于为全球旅行者提供最地道的中国旅行体验，从历史古迹到现代都市，从北方雪景到南方水乡，带您领略多彩中国的独特魅力。
          </p>
          <div class="social-icons">
            <a href="#" class="social-icon" aria-label="微信">
              <i class="fab fa-weixin"></i>
            </a>
            <a href="#" class="social-icon" aria-label="微博">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="#" class="social-icon" aria-label="抖音">
              <i class="fab fa-tiktok"></i>
            </a>
          </div>
        </div>
        
        <!-- 支持信息区域 -->
        <div class="footer-links">
          <h3 class="footer-heading">旅行支持</h3>
          <ul class="footer-nav">
            <li><a href="#">旅行问答</a></li>
            <li><a href="#">隐私政策</a></li>
            <li><a href="#">紧急联系</a></li>
            <li><a href="#">旅游保险</a></li>
          </ul>
        </div>
        
        <!-- 关于我们区域 -->
        <div class="footer-links">
          <h3 class="footer-heading">关于我们</h3>
          <ul class="footer-nav">
            <li><a href="#">品牌故事</a></li>
            <li><a href="#">旅行攻略</a></li>
            <li><a href="#">加入我们</a></li>
            <li><a href="#">商务合作</a></li>
            <li><a href="#">媒体中心</a></li>
          </ul>
        </div>
        
        <!-- 联系信息区域 -->
        <div class="footer-contact">
          <h3 class="footer-heading">联系我们</h3>
          <address class="contact-details">
            <p><i class="fas fa-map-marker-alt contact-icon"></i> 武汉市</p>
            <p class="contact-phone"><i class="fas fa-phone contact-icon"></i> 400-888-8888</p>
            <p class="contact-email"><i class="fas fa-envelope contact-icon"></i> service@tripgo.cn</p>
          </address>
        </div>
      </div>
      
      <div class="footer-bottom">
        <div class="copyright">
          <p>© 2023 签悦中国 版权所有 | 京ICP备12345678号</p>
        </div>
        <div class="payment-methods">
          <span class="payment-text">支持付款方式：</span>
          <span class="payment-type">
            <i class="fab fa-alipay payment-icon"></i>
            支付宝
          </span>
          <span class="payment-type">
            <i class="fab fa-weixin payment-icon"></i>
            微信支付
          </span>

        </div>
      </div>
    </div>
  </footer>
</template>

<style scoped>
.footer-section {
  width: 100%;
  background-color: #ffffff;
  padding: 60px 0 30px;
  border-top: 1px solid #e9e9e9;
}

.footer-container {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.animate .footer-top {
  opacity: 1;
  transform: translateY(0);
}

.company-info {
  max-width: 300px;
}

.logo {
  margin-bottom: 20px;
}

.logo img {
  height: 40px;
}

.company-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f5f5f5;
  color: #333;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background-color: #00c389;
  color: white;
}

.footer-heading {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  margin-bottom: 12px;
}

.footer-nav a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: #00c389;
}

.contact-details {
  font-style: normal;
  color: #666;
  line-height: 1.6;
}

.contact-details p {
  margin-bottom: 8px;
}

.contact-phone, .contact-email {
  margin-top: 16px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid #e9e9e9;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out 0.2s;
}

.animate .footer-bottom {
  opacity: 1;
  transform: translateY(0);
}

.copyright {
  color: #888;
  font-size: 0.9rem;
}

.payment-text {
  color: #888;
  font-size: 0.9rem;
  margin-right: 10px;
}

.payment-type {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 0.9rem;
  background-color: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.payment-type:hover {
  background-color: #e9e9e9;
}

.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.contact-icon {
  margin-right: 8px;
  width: 16px;
  color: #00c389;
}

.payment-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .company-info {
    grid-column: span 2;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
  }
  
  .payment-methods {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  
  .company-info {
    grid-column: 1;
  }
  
  .footer-section {
    padding: 40px 0 20px;
  }
}
</style> 